<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="nav-brand">
          <i class="fas fa-hard-hat"></i>
          <span>矿山安全评价系统</span>
        </div>
        <nav class="nav-menu" :class="{ open: isNavMenuOpen }">
          <router-link to="/evaluation" class="nav-link">安全评价</router-link>
          <router-link to="/hazard" class="nav-link">隐患跟踪</router-link>
          <router-link to="/reports" class="nav-link">报告管理</router-link>
          <router-link to="/knowledge" class="nav-link">知识库</router-link>
          <router-link to="/users" class="nav-link" v-if="userStore.isAdmin">人员管理</router-link>
        </nav>
        <div class="user-info">
          <div class="quick-actions">
            <!-- <button class="quick-btn" title="消息通知" @click="showNotifications">
              <i class="fas fa-bell"></i>
              <span class="notification-badge">3</span>
            </button> -->
          </div>
          <div class="user-details">
            <span class="user-name">{{ userStore.userInfo.name || userStore.userInfo.username || '用户' }}</span>
            <span class="user-role">{{ userStore.getRoleDisplayName() }}</span>
          </div>
          <div class="user-avatar" @click="showPersonalProfile" title="查看个人信息">
            <i class="fas fa-user"></i>
          </div>
          <button class="logout-btn" @click="handleLogout" title="退出登录">
            <i class="fas fa-sign-out-alt"></i>
            <span class="logout-text">退出</span>
          </button>
          <button class="menu-toggle" @click="toggleNavMenu" v-if="isMobile">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ open: isSidebarOpen }">
      <div class="sidebar-menu">
        <router-link to="/evaluation" class="menu-item">
          <i class="fas fa-calculator"></i>
          <span>安全评价计算</span>
        </router-link>
        <router-link to="/hazard" class="menu-item">
          <i class="fas fa-exclamation-triangle"></i>
          <span>隐患跟踪管理</span>
        </router-link>
        <router-link to="/reports" class="menu-item">
          <i class="fas fa-file-alt"></i>
          <span>报告管理</span>
        </router-link>
        <router-link to="/knowledge" class="menu-item">
          <i class="fas fa-book"></i>
          <span>知识标准库</span>
        </router-link>
        <router-link to="/users" class="menu-item" v-if="userStore.isAdmin">
          <i class="fas fa-users"></i>
          <span>人员信息管理</span>
        </router-link>
      </div>
    </aside>

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="breadcrumb-container">
        <i class="fas fa-home"></i>
        <span class="breadcrumb-text">{{ $route.meta.title || '未知页面' }}</span>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view />
    </main>

    <!-- 个人信息模态框 -->
    <div v-if="showProfileModal" class="modal-overlay" @click="closePersonalProfile">
      <div class="modal-content personal-profile-container" @click.stop>
        <div class="modal-header">
          <h3><i class="fas fa-user-edit"></i> 个人信息管理</h3>
          <button class="modal-close" @click="closePersonalProfile">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body profile-modal-body">
          <PersonalProfile />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { api } from '../api/index'
import PersonalProfile from './PersonalProfile.vue'

const router = useRouter()
const userStore = useUserStore()
const isNavMenuOpen = ref(false)
const isSidebarOpen = ref(false)
const isMobile = ref(false)
const showProfileModal = ref(false)

const toggleNavMenu = () => {
  isNavMenuOpen.value = !isNavMenuOpen.value
}


const showPersonalProfile = () => {
  showProfileModal.value = true
}

const closePersonalProfile = () => {
  showProfileModal.value = false
}

const handleLogout = async () => {
  if (confirm('确定要退出登录吗？')) {
    try {
      // 调用登出API
      await api.user.logout()
      
      // 清空用户状态
      userStore.logout()
      
      // 显示退出成功提示
      showNotification('退出登录成功', 'success')
      
      // 跳转到登录页面
      setTimeout(() => {
        router.push('/login')
      }, 1000)
    } catch (error) {
      console.error('退出登录失败:', error)
      // 即使API调用失败，也清空本地状态并跳转
      userStore.logout()
      router.push('/login')
    }
  }
}

// 显示通知
const showNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
  // 创建通知元素
  const notification = document.createElement('div')
  notification.className = `notification ${type}`
  notification.textContent = message
  
  // 设置样式
  const colors = {
    success: '#27ae60',
    error: '#e74c3c', 
    warning: '#f39c12',
    info: '#3498db'
  }
  
  notification.style.cssText = `
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 2001;
    border-left: 4px solid ${colors[type]};
    animation: slideIn 0.3s ease;
    max-width: 300px;
    font-size: 14px;
  `
  
  document.body.appendChild(notification)
  
  // 3秒后自动移除
  setTimeout(() => {
    if (notification.parentNode) {
      notification.remove()
    }
  }, 3000)
}

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style>
@import '../assets/mine-system.css';

/* 路由链接样式 */
.nav-link.router-link-active,
.menu-item.router-link-active {
  color: #3498db !important;
  background: rgba(52, 152, 219, 0.1);
}

.menu-item.router-link-active {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.menu-item {
  text-decoration: none;
}

/* 个人信息模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.personal-profile-container {
  max-width: 90vw;
  width: 1200px;
  max-height: 95vh;
}

.profile-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.modal-body {
  padding: 30px;
  max-height: 60vh;
  overflow-y: auto;
}

/* 退出登录按钮样式 */
.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-left: 12px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.logout-btn:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
}

.logout-btn i {
  font-size: 16px;
}

.logout-text {
  font-size: 13px;
}

/* 通知动画 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 用户详情样式 */
.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.user-role {
  font-size: 12px;
  color: #7f8c8d;
  background: #ecf0f1;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .personal-profile-container {
    width: 95%;
    max-width: 95vw;
  }
  
  .logout-text {
    display: none;
  }
  
  .logout-btn {
    padding: 8px;
    margin-left: 8px;
  }
  
  .user-details {
    display: none;
  }
}
</style>
